<template>
	<view class="simple-address" @touchmove.stop.prevent="clear">
    <u-popup :show="showPopup" mode="center">
      <!-- 遮罩层 -->
      <view class="simple-address-mask" @touchmove.stop.prevent="clear" v-if="maskClick" :class="[ani + '-mask', animation ? 'mask-ani' : '']"
       :style="{
          'background-color': maskBgColor
        }" @tap="hideMask(true)"></view>

      <view class="simple-address-content simple-address--fixed" :class="[type, ani + '-content', animation ? 'content-ani' : '']">
        <view class="simple-address__header">
          <view class="simple-address__header-btn-box" @click="pickerCancel">
            <text class="simple-address__header-text" :style="{ color: cancelColor, fontSize: btnFontSize }">取消</text>
          </view>
          <view class="simple-address__header-btn-box" @click="pickerConfirm">
            <text class="simple-address__header-text" :style="{ color: confirmColor || themeColor, fontSize: btnFontSize }">确定</text>
          </view>
        </view>
        <view class="simple-address__box">
          <picker-view indicator-style="height: 70rpx;" class="simple-address-view" :value="pickerValue" @change="pickerChange">
            <picker-view-column>
              <!-- #ifndef APP-NVUE -->
              <view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</view>
              <!-- #endif -->
              <!-- #ifdef APP-NVUE -->
              <text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</text>
              <!-- #endif -->
            </picker-view-column>
            <picker-view-column>
              <!-- #ifndef APP-NVUE -->
              <view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</view>
              <!-- #endif -->
              <!-- #ifdef APP-NVUE -->
              <text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</text>
              <!-- #endif -->
            </picker-view-column>
            <picker-view-column>
              <!-- #ifndef APP-NVUE -->
              <view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in districtDataList" :key="index">{{ item.label }}</view>
              <!-- #endif -->
              <!-- #ifdef APP-NVUE -->
              <text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in districtDataList" :key="index">{{ item.label }}</text>
              <!-- #endif -->
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>

	export default {
		name: 'pickManageRegion',
		props: {
			mode: {

				type: String,
				default: 'default'
			},
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			/* 弹出层类型，可选值；
					bottom：底部弹出层
				*/
			type: {
				type: String,
				default: 'bottom'
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
			maskBgColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.4)' //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
			},
			themeColor: {
				type: String,
				default: '' // 确认按钮颜色（向下兼容）
			},
			cancelColor: {
				type: String,
				default: '' // 取消按钮颜色
			},
			confirmColor: {
				type: String,
				default: '' // 确认按钮颜色
			},
			fontSize: {
				type: String,
				default: '28rpx' // picker-item字体大小
			},
			btnFontSize: {
				type: String,
				default: '' // 按钮的字体大小
			},
			/* 默认值 */
			pickerValueDefault: {
				type: Array,
				default () {
					return [0, 0, 0];
				}
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false,
				pickerValue: [0, 0, 0],
				provinceDataList: [],
				cityDataList: [],
				districtDataList: [],
				provinceCode: 0,
				cityCode: 0,

			};
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open();
				} else {
					this.close();
				}
			},
			pickerValueDefault() {
				this.init();
			}
		},
		created() {
			this.init();
		},
		methods: {
			// 获取省
      findProvinceList() {
				let region = {
					code: 1
				}
				this.provinceDataList = [];
				this.$api('region.findRegionList',region).then(res => {
          if (res.status == 0){
            this.provinceList = res.data;
            res.data.forEach(data => {
              let provinceList = {
                'label': data.name,
                'value': data.code
              }
              this.provinceDataList.push(provinceList)
            });
            this.provinceCode = this.provinceDataList[0].value;
            this.findCityList(this.provinceCode);
          }
				})
			},

			//获取市
			findCityList(provinceCode) {
				let region = {
					code: provinceCode
				}
				this.cityDataList = [];
				this.$api('region.findRegionList',region).then(res => {
          if (res.status == 0){
            this.provinceList = res.data;
            res.data.forEach(data => {
              let provinceList = {
                'label': data.name,
                'value': data.code
              }
              this.cityDataList.push(provinceList)
            })
            this.cityCode = this.cityDataList[0].value
            this.findAreaList(this.cityCode);
          }
				})
			},

			// 获取区
			findAreaList(cityCode) {
				let region = {
					code: cityCode
				}
				this.districtDataList = [];
				this.$api('region.findRegionList',region).then(res => {
          if (res.status == 0){
            this.provinceList = res.data;
            res.data.forEach(data => {
              let provinceList = {
                'label': data.name,
                'value': data.code
              }
              this.districtDataList.push(provinceList)
            })
          }
				})
			},

			init() {
         this.findProvinceList();

        this.pickerValue = this.pickerValueDefault;
			},

			pickerChange(e) {
				let changePickerValue = e.detail.value;
				// console.log(this.pickerValue)
				if (this.pickerValue[0] !== changePickerValue[0]) {
					// console.log("第一级发生滚动")
					// 第一级发生滚动
					this.findCityList(this.provinceDataList[changePickerValue[0]].value);
					changePickerValue[1] = 0;
					changePickerValue[2] = 0;
				} else if (this.pickerValue[1] !== changePickerValue[1]) {
					// 第二级滚动
					// console.log("第二级滚动")
					this.findAreaList(this.cityDataList[changePickerValue[1]].value);
					// this.districtDataList = districtData[changePickerValue[0]][changePickerValue[1]];
					changePickerValue[2] = 0;
				}
				this.pickerValue = changePickerValue;
			},
			_$emit(emitName) {
				let pickObj = {
					label: this._getLabel(),
					value: this.pickerValue,
					cityCode: this._getCityCode(),
					districtCode: this._getDistrictCode(),
					provinceCode: this._getProvinceCode(),
					labelArr: this._getLabel().split('-')
				};
				this.$emit(emitName, pickObj);
			},
			_getLabel() {
				let pcikerLabel =
					this.provinceDataList[this.pickerValue[0]].label + '-' + this.cityDataList[this.pickerValue[1]].label + '-' + this
					.districtDataList[this.pickerValue[2]].label;
				return pcikerLabel;
			},
			_getCityCode() {
				return this.cityDataList[this.pickerValue[1]].value;
			},
			_getProvinceCode() {
				return this.provinceDataList[this.pickerValue[0]].value;
			},
			_getDistrictCode() {
				return this.districtDataList[this.pickerValue[2]].value;
			},

			clear() {},
			hideMask() {
				this._$emit('onCancel');
				this.close();
			},
			pickerCancel() {
				this._$emit('onCancel');
				this.close();
			},
			pickerConfirm() {
				this._$emit('onConfirm');
				this.close();
			},
			open() {
				this.showPopup = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'simple-' + this.type;
					}, 100);
				});
			},
			close(type) {
				if (!this.maskClick && type) return;
				this.ani = '';
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false;
					}, 300);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.simple-address {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
    z-index: 100;
	}

	.simple-address-mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;

		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 0;
		/* #ifndef APP-NVUE */
		z-index: 970;
		/* #endif */
	}

	.mask-ani {
		transition-property: opacity;
		transition-duration: 0.2s;
	}

	.simple-bottom-mask {
		opacity: 1;
	}

	.simple-center-mask {
		opacity: 1;
	}

	.simple-address--fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		transition-property: transform;
		transition-duration: 0.3s;
		transform: translateY(460rpx);
		/* #ifndef APP-NVUE */
		z-index: 970;
		/* #endif */
	}

	.simple-address-content {
		background-color: #ffffff;
	}

	.simple-content-bottom {
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(500rpx);
	}

	.content-ani {
		transition-property: transform, opacity;
		transition-duration: 0.2s;
	}

	.simple-bottom-content {
		transform: translateY(0);
	}

	.simple-center-content {
		transform: scale(1);
		opacity: 1;
	}

	.simple-address__header {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		border-bottom-color: #f2f2f2;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
	}

	.simple-address--fixed-top {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		border-top-color: $uni-border-color;
		border-top-style: solid;
		border-top-width: 1rpx;
	}

	.simple-address__header-btn-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 90rpx;
	}

	.simple-address__header-text {
		text-align: center;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
		line-height: 90rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.simple-address__box {
		position: relative;
	}

	.simple-address-view {
		position: relative;
		bottom: 0;
		left: 0;
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
		height: 408rpx;
		background-color: rgba(255, 255, 255, 1);
	}

	.picker-item {
		text-align: center;
		line-height: 70rpx;
		text-overflow: ellipsis;
		font-size: 28rpx;
	}
</style>
